import React from "react";
import {
  View,
  Text,
  Modal,
  Pressable,
  StyleSheet,
  TouchableOpacity,
  Image,
} from "react-native";
import { useTheme } from "@/contexts/ThemeContext";
import QRCode from "react-native-qrcode-svg";
import { MaterialIcons } from "@expo/vector-icons";
import { DEFAULT_AVATAR_URL } from "@/config/default-value";

export type QRCodeType = "group" | "personal";

interface QRCodeModalProps {
  visible: boolean;
  onClose: () => void;
  type?: QRCodeType;
  id: string;
  name: string;
  avatar?: string;
  onShare: () => void;
  // 兼容原有的群聊二维码接口
  groupId?: string;
  groupName?: string;
}

const QRCodeModal: React.FC<QRCodeModalProps> = ({
  visible,
  onClose,
  type = "group",
  id,
  name,
  avatar,
  onShare,
  // 兼容原有的群聊二维码接口
  groupId,
  groupName,
}) => {
  const { colors } = useTheme();

  // 兼容原有的群聊二维码接口
  const finalId = groupId || id;
  const finalName = groupName || name;

  // 获取头像源
  const getAvatarSource = () => {
    if (avatar) {
      return { uri: avatar };
    }
  };

  const styles = StyleSheet.create({
    modalOverlay: {
      flex: 1,
      justifyContent: "center",
      alignItems: "center",
      backgroundColor: "rgba(0, 0, 0, 0.5)",
    },
    modalContent: {
      width: "80%",
      padding: 20,
      borderRadius: 12,
      backgroundColor: colors.background,
      alignItems: "center",
    },
    avatarContainer: {
      marginBottom: 16,
      alignItems: "center",
    },
    avatar: {
      width: 80,
      height: 80,
      borderRadius: 40,
      marginBottom: 8,
    },
    name: {
      fontSize: 18,
      fontWeight: "bold",
      color: colors.text.primary,
      marginBottom: 4,
    },
    idLabel: {
      fontSize: 16,
      marginBottom: 20,
      color: colors.text.secondary,
    },
    qrContainer: {
      padding: 20,
      backgroundColor: "#FFFFFF",
      borderRadius: 8,
      marginBottom: 20,
    },
    qrLogo: {
      width: 40,
      height: 40,
      borderRadius: 20,
    },
    buttonContainer: {
      flexDirection: "row",
      justifyContent: "space-between",
      width: "100%",
    },
    button: {
      flexDirection: "row",
      alignItems: "center",
      padding: 12,
      borderRadius: 8,
      justifyContent: "center",
      flex: 1,
      marginHorizontal: 5,
    },
    shareButton: {
      backgroundColor: colors.primary,
    },
    closeButton: {
      backgroundColor: colors.backgroundLight,
    },
    buttonText: {
      marginLeft: 5,
      fontSize: 16,
      fontWeight: "500",
    },
    shareText: {
      color: "#FFFFFF",
    },
    closeText: {
      color: colors.text.primary,
    },
  });

  // 根据类型生成不同的二维码内容
  const getQRValue = () => {
    if (type === "group") {
      return `telechat://groupchat?id=${finalId}&name=${encodeURIComponent(
        finalName
      )}`;
    } else {
      return `telechat://user?id=${finalId}&name=${encodeURIComponent(
        finalName
      )}`;
    }
  };

  // 获取ID标签文本
  const getIdLabel = () => {
    return type === "group" ? `群号: ${finalId}` : `用户ID: ${finalId}`;
  };

  const avatarSource = getAvatarSource();

  return (
    <Modal
      transparent
      animationType="fade"
      visible={visible}
      onRequestClose={onClose}
    >
      <Pressable style={styles.modalOverlay} onPress={onClose}>
        <Pressable
          style={styles.modalContent}
          onPress={(e) => e.stopPropagation()}
        >
          <View style={styles.avatarContainer}>
            <Image
              source={avatarSource}
              style={styles.avatar}
              resizeMode="cover"
            />
            <Text style={styles.name}>{finalName}</Text>
            <Text style={styles.idLabel}>{getIdLabel()}</Text>
          </View>

          <View style={styles.qrContainer}>
            <QRCode
              value={getQRValue()}
              size={200}
              logo={avatarSource}
              logoSize={40}
              logoBackgroundColor="white"
              logoMargin={2}
              logoBorderRadius={20}
            />
          </View>

          <View style={styles.buttonContainer}>
            <TouchableOpacity
              style={[styles.button, styles.shareButton]}
              onPress={onShare}
            >
              <MaterialIcons name="share" size={20} color="#FFFFFF" />
              <Text style={[styles.buttonText, styles.shareText]}>分享</Text>
            </TouchableOpacity>
            <TouchableOpacity
              style={[styles.button, styles.closeButton]}
              onPress={onClose}
            >
              <MaterialIcons
                name="close"
                size={20}
                color={colors.text.primary}
              />
              <Text style={[styles.buttonText, styles.closeText]}>关闭</Text>
            </TouchableOpacity>
          </View>
        </Pressable>
      </Pressable>
    </Modal>
  );
};

export default QRCodeModal;
